import React, {useState, useEffect} from "react";
import { Tree, Breadcrumb, Button, Form } from 'antd';

const treeData = [
    {
      title: '商品',
      key: '0-0',
      children: [
        {
            title: '商品列表',
            key: '0-0-0',
        },
        {
            title: '添加商品',
            key: '0-0-1',
        },
        {
            title: '商品分类',
            key: '0-0-2',
        },
        {
            title: '商品类型',
            key: '0-0-3',
        },
        {
            title: '品牌管理',
            key: '0-0-4',
        },
      ],
    },
    {
        title: '订单',
        key: '0-1',
        children: [
            {
                title: '订单列表',
                key: '0-1-0',
            },
            {
                title: '订单设置',
                key: '0-1-1',
            },
            {
                title: '退货申请处理',
                key: '0-1-2',
            },
            {
                title: '退货原因设置',
                key: '0-1-3',
            },
        ],
    },
    {
        title: '营销',
        key: '0-2',
        children: [
            {
                title: '秒杀活动列表',
                key: '0-2-0',
            },
            {
                title: '优惠券列表',
                key: '0-2-1',
            },
            {
                title: '品牌推荐',
                key: '0-2-2',
            },
            {
                title: '新品推荐',
                key: '0-2-3',
            },
            {
                title: '人气推荐',
                key: '0-2-4',
            },
            {
                title: '专题推荐',
                key: '0-2-5',
            },
            {
                title: '广告列表',
                key: '0-2-6',
            },
        ],
    },
    {
        title: '权限',
        key: '0-3',
        children: [
            {
                title: '用户列表',
                key: '0-3-0',
            },
            {
                title: '角色列表',
                key: '0-3-1',
            },
            {
                title: '菜单列表',
                key: '0-3-2',
            },
            {
                title: '资源列表',
                key: '0-3-3',
            },
        ],
    }
  ];

const RoleAlloRes = () => {

    const [expandedKeys, setExpandedKeys] = useState(['0-0']);
    const [checkedKeys, setCheckedKeys] = useState(['0-0-0']);
    const [selectedKeys, setSelectedKeys] = useState([]);
    const [autoExpandParent, setAutoExpandParent] = useState(true);

    const onExpand = (expandedKeysValue) => {
        console.log('onExpand', expandedKeysValue);
        // if not set autoExpandParent to false, if children expanded, parent can not collapse.
        // or, you can remove all expanded children keys.
        setExpandedKeys(expandedKeysValue);
        setAutoExpandParent(false);
    };
    const onCheck = (checkedKeysValue) => {
        console.log('onCheck', checkedKeysValue);
        setCheckedKeys(checkedKeysValue);
    };
    const onSelect = (selectedKeysValue, info) => {
        console.log('onSelect', info);
        setSelectedKeys(selectedKeysValue);
    };

    return(
        <div className='container'>
            <Breadcrumb
            style={{
                margin: '16px 0',
            }}
            >
            <Breadcrumb.Item>权限</Breadcrumb.Item>
            <Breadcrumb.Item>角色</Breadcrumb.Item>
            <Breadcrumb.Item>分配菜单</Breadcrumb.Item>
            </Breadcrumb>

            <Form>
                <Tree
                    checkable
                    onExpand={onExpand}
                    expandedKeys={expandedKeys}
                    autoExpandParent={autoExpandParent}
                    onCheck={onCheck}
                    checkedKeys={checkedKeys}
                    onSelect={onSelect}
                    selectedKeys={selectedKeys}
                    treeData={treeData}
                />

                <Button type='primary' style={{width: '100px', marginTop:'10px'}}>保存</Button>
                <Button style={{width: '100px', marginTop:'10px', marginLeft:'20px'}}>清空</Button>
            </Form>

        </div>
    )
};

export default RoleAlloRes;